<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #f00;
            position: relative;
        }

        /* .hide1 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;

            height: 0;
            overflow: hidden;
            transition: .3s;
        }

        .box:hover .hide1 {
            height: 300px;
        } */


        /* .hide2 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            bottom: 0;

            height: 0;
            overflow: hidden;
            transition: .3s;
        }

        .box:hover .hide2 {
            height: 300px;
        } */

        /* .hide3 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;
            left: 0;

            width: 0;
            overflow: hidden;
            transition: .3s;
        }

        .box:hover .hide3 {
            width: 300px;
        } */

        /* .hide4 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;
            right: 0;

            width: 0;
            overflow: hidden;
            transition: .3s;
        }

        .box:hover .hide4 {
            width: 300px;
        } */



        /* 位移实现 */

        .box {
            overflow: hidden;
        }
        /* .hide1 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;

            transform: translateY(-100%);
            transition: .3s;
        }
        .box:hover .hide1 {
            transform: translateY(0);
        } */


        /* .hide2 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;

            transform: translateY(100%);
            transition: .3s;
        }

        .box:hover .hide2 {
            transform: translateY(0);
        } */

        /* .hide3 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;

            transform: translateX(-100%);
            transition: .3s;
        }

        .box:hover .hide3 {
            transform: translateX(0);
        } */

        .hide4 {
            width: 300px;
            height: 300px;
            background-color: #000;

            position: absolute;
            top: 0;

            transform: translateX(100%);
            transition: .3s;
        }

        .box:hover .hide4 {
            transform: translateX(0);
        }
    </style>
</head>

<body>

    <!-- 
        定位：position:fixed / absolute / relative / sticky / static(相当于none)

        辅助属性   left / right / top / bottom / z-index

        定位的特点

            fixed:  脱离文档流，永远相对于浏览器窗口

            absolute: 脱离文档流，是相对于参照物而言的  --- 最近的具有定位的祖先元素

            relative： 没有脱离文档流 , 相对于自身位置而言的  --- 一般是用来给绝对定位提供参照物的





        显隐效果
            带动画的     
                高度动画  height:0;overflow:hidden;transition:.3s;     height:XXXpx
                位移动画  把隐藏的盒子移到大盒子的外面，大盒子上写overflow:hidden     
                缩放动画

            不带动画的    display:none      display:block
     -->


    <div class="box">
        <div class="hide1"></div>
        <div class="hide2"></div>
        <div class="hide3"></div>
        <div class="hide4"></div>
    </div>

</body>

</html>